<template>
  <view class="edit_tag_wrapper">
    <TopNav name="back">
      <text slot="title">{{id === '9999' ? '新建分类' : '编辑分类'}}</text>
    </TopNav>
    <section class="input_tag">
      <TypeSection @getCategory="getCategory" />
      <label v-if="id !== '9999' ">
        <Icon :iconName="iconName === '9999' ? tag.iconName : iconName"/>
        <input type="text"
               placeholder="请输入分类类型(不超过四个字)"
               v-model="value"
        />
      </label>
      <label v-if="id === '9999' ">
        <Icon :iconName="iconName"/>
        <input type="text"
               placeholder="请输入分类类型(不超过四个字)"
               v-model="value"
        />
      </label>
    </section>
    <section class="icon_list">
      <view class="ul">
        <view class="li" v-for="icon in  defaultIcon" :key="icon.id" @click="getIconName(icon.iconName)">
          <Icon :iconName="icon.iconName"/>
        </view>
      </view>
    </section>
    <section>
      <view class="button_tag" v-if="id === '9999'">
        <button class="save" @click="addNewTag">添加新标签</button>
      </view>
      <view class="button_tag" v-else>
        <button class="save" @click="saveTag">保存标签</button>
        <button class="delete" @click="deleteOneTag">删除标签</button>
      </view>
    </section>
  </view>
</template>

<script>
import TopNav from '@/components/common/TopNav/TopNav'
import TypeSection from '@/components/common/TypeSection/TypeSection'
import { defaultIcon } from '@/common/iconsLib'

export default {
  components: { TypeSection, TopNav },

  data() {
    return {
      id: this.$route.params.id,
      defaultIcon: defaultIcon,
      iconName: '9999',
      mold: '-',
      tags: this.$store.state.tagList,
      tag: this.$store.getters.findTag(this.id),
      value: this.tag && this.tag.name || ''
    }
  },
  methods: {
    getCategory(category) {
      this.mold = category
    },
    getIconName(iconName) {
      this.iconName = iconName
    },
    saveTag() {
      if (this.tag && this.value && this.value.trim().length <= 4 && this.value.length > 0) {
        const newIconName = this.iconName !== '9999' ? this.iconName : this.tag.iconName
        const id = this.tag.id; const name = this.value; const iconName = newIconName; const mold = this.mold
        this.$store.commit('updateTag', { id, name, iconName, mold })
        this.$api.alert('添加成功')
        this.$router.go(-1)
      } else {
        this.$api.alert('不能输入空的标签以及输入的汉字不能超过四个！')
        this.value = ''
      }
    },
    addNewTag() {
      if (this.value !== '' && this.value.trim().length <= 4) {
        const name = this.value; const iconName = this.iconName; const mold = this.mold
        for (let i = 0; i < this.tags.length; i++) {
          if (name === this.tags[i].name) {
            this.$api.alert('标签名重复')
            return
          }
        }
        this.$store.commit('createTag', { name, iconName, mold })
        this.$api.alert('添加成功')
        this.$router.go(-1)
      } else {
        this.$api.alert('不能输入空的标签以及输入的汉字不能超过四个！')
      }
    },
    deleteOneTag() {
      if (this.tag) {
        this.$store.commit('removeTag', this.tag.id)
        this.$api.alert('删除成功')
        this.$router.go(-1)
      }
    }
  }
}

</script>

<style lang="scss" scoped>
  .edit_tag_wrapper {
    max-width: 520px;
    margin: 0 auto;
    background-color: #fff;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;

    .input_tag {
      padding: 12px 16px;

      .label {
        display: flex;
        align-items: center;

        input {
          flex: 1;
          border: none;
          border-bottom: 2px solid #000;
          outline: none;
          padding: 10px 0;
          margin: 0 12px;
          font-size: 16px;
        }

        .icon {
          margin-right: 10px;
          width: 38px;
          height: 38px;
        }

      }
    }

    .icon_list {
      flex: 1;
      overflow-y: auto;

      .ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;

        .li {
          padding: 20px;

          .icon {
            width: 38px;
            height: 38px;
          }
        }
      }
    }

    .button_tag {
      padding-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;

      button {
        outline: none;
        font-size: 14px;
        border-radius: 4px;
        padding: 10px 24px;
        margin: 0 24px;

        &.save {
          border: 1px solid $uni-color-primary;
          background-color: #fff;
        }

        &.delete {
          border: 1px solid #FFFFFF;
          background-color: $uni-color-primary;
          color: red;
        }

        .selected {
          background-color: $uni-color-primary;
          color: #fff;
        }
      }
    }
  }
</style>
